<!doctype html>
<html>
<head>
	<meta charset="utf-8"><meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
	<title>我的消息</title>
	<link rel="stylesheet" type="text/css" href="../../lib/css/skin.css"/>
</head>
<body>
<div id="root">
	<div class="app_warp bg">
		<div class="app_head">
			<span class="left back"></span>
			<span class="name">我的消息</span>
			<span class="right">
				<a href="javascript:;" class="edit" tapmode onclick="edit()">编辑</a>
			</span>
		</div>
		<div class="app_col_nav clearfix">
			<div class="app_col_inner_nav loaded menuflex">
				<a href="javascript:;" tapmode onclick="showContents(0)" class="active">通知</a>
				<a href="javascript:;" tapmode onclick="showContents(1)">评论</a>
				<a href="javascript:;" tapmode onclick="showContents(2)">订单消息</a>
			</div>
		</div>
		<div class="app_main editing">
			<div id="nocontent" class="nocontent animated fadeInUp hide">
				<img src="../../lib/img/nocomment.png" alt="">
				<div class="text">
					没有相关消息
				</div>
			</div>
			<div id="noready" class="nocontent animated fadeInUp">
				<img src="../../lib/img/loading.gif" class="minimize" alt="">
				<div class="text minimize">
					准备数据
				</div>
			</div>
			<div id="user_xiaoxi" class="user_xiaoxi"></div>
		</div>
		<div class="list_delete_line animated fadeInUp hide">
			<span class="checker" tapmode onclick="checnAll(this)"></span>
			<a href="javascript:;" class="delete_sel" tapmode onclick="deleteMsg()">删除选中条目</a>
		</div>
	</div>
</div>
<script id="user_xiaoxi_template" type="text/html">
	<ul class="xiaoxi_msglist animated fadeInUp hide">
		<% for(var i in data.notify){ var _notify_ = data.notify[i]%>
		<li class="<%:=_notify_.status==false?'readed':''%>" tapmode onclick="getNotify(this,<%:=_notify_.id%>,'<%:=_notify_.href%>')">
			<span class="checker" data_id="<%:=_notify_.id%>"></span>
			<span class="name <% if(_notify_.status==='true'){%>readed<%}%>">
				<%:=_notify_.title%>
			</span>
		</li>
		<%}%>
	</ul>
	<ul class="xiaoxi_interactionlist animated fadeInUp hide">
		<%for(var j in data.circle){ var _circle_ = data.circle[j]%>
		<li class="<%:=_circle_.status==false?'readed':''%>" tapmode onclick="getCircle(this,<%:=_circle_.mid%>)">
			<span class="checker" data_id="<%:=_circle_.mid%>"></span>
			<span class="name <% if(_notify_.status==='true'){%>readed<%}%>">
				<%:=_circle_.name%><%:=_circle_.do%>
			</span>
		</li>
		<%}%>
	</ul>
	<ul class="xiaoxi_orderlist animated fadeInUp hide">
		<% for(var l in data.order){ var _order_ = data.order[l]%>
		<li class="mb <%:=_order_.status==false?'readed':''%>" tapmode onclick="getOrder(this,<%:=_order_.id%>)">
			<span class="checker" data_id="<%:=_order_.id%>"></span>
			<span class="name">
				<span class="tit">
					您的订单<%:=_order_.orderStatus%>
				</span>
				<%:=_order_.text%>
				<a class="ok" href="javascript:;">点击查看</a>
			</span>
		</li>
		<%}%>
	</ul>
</script>

<script>

	var itemNum = 0,
		editing = false,
		edit = function () {},
		tgc = function (obj) {
			$(obj).find('.checker').toggleClass('checked');
		},
		setRead=function(obj,id,call){
			$(obj).addClass('readed');
			_$.ajax({
				interface: 'hasRead',
				data: {
					id: id,
					type: ['notify', 'circle', 'order'][itemNum]
				},
				call:call
			})
		},
		getNotify = function (obj, id, href) {
			if (editing) {
				tgc(obj)
			} else {
				setRead(obj,id,function(){_$.getPage(href)});
			}
		},
		getCircle = function (obj, id) {
			if (editing) {
				tgc(obj)
			} else {
				setRead(obj,id,function(){
					_$.viewArtcircle(obj, id)
				});
			}
		},
		getOrder = function (obj, id) {
			if (editing) {
				tgc(obj)
			} else {
				setRead(obj,id,function(){
					api.openWin({
						name: 'dingdan_view',
						url: './dingdan_view.html',
						pageParam:{
							id:id
						}
					})
				});
			}
		},
		checnAll = function (obj) {
			var allItem = [$('.xiaoxi_msglist'), $('.xiaoxi_interactionlist'), $('.xiaoxi_orderlist')][itemNum];
			if ($(obj).hasClass('checked')) {
				allItem.find('.checker').removeClass('checked');
				$(obj).removeClass('checked');
			} else {
				allItem.find('.checker').addClass('checked');
				$(obj).addClass('checked');
			}
		},
		deleteMsg = function () {
			var ids = [], allItem = [$('.xiaoxi_msglist'), $('.xiaoxi_interactionlist'), $('.xiaoxi_orderlist')][itemNum].find('.checker.checked');
			if (allItem.length > 0) {
				allItem.map(function (i) {
					ids.push(parseInt(allItem.eq(i).attr('data_id')));
				})
				_$.ajax({
					interface: 'delMsgs',
					data: {
						ids: ids,
						type: ['notify', 'circle', 'order'][itemNum]
					},
					call: function (data) {
						console.log(JSON.stringify(data));
						if (data.status === 200) {
							allItem.parent().remove();
							editing = true;
							edit();
							checkListLength($(['.xiaoxi_msglist', '.xiaoxi_interactionlist', '.xiaoxi_orderlist'][itemNum]));
						} else {
							api.toast({
								msg: data.msg
							})
						}
					}
				})
			}
		},
		checkListLength = function () {
			$('#noready,#nocontent,#user_xiaoxi ul').addClass('hide');
			var obj = $(['.xiaoxi_msglist','.xiaoxi_interactionlist','.xiaoxi_orderlist'][itemNum]);

			if (obj.find('li').length > 0 ? true : false) {
				obj.removeClass('hide');
			} else {
				obj.addClass('hide');
				$('#nocontent').removeClass('hide');
			}
		},
		showContents = function (curentItem) {
			itemNum = curentItem;
			$('.app_main').removeClass('editing');
			$('.app_col_inner_nav a').removeClass('active').eq(curentItem).addClass('active');
			checkListLength();
			edit(true);
		},
		appready = function () {
			$('.component_loading').fadeOut();
			_$.sleep(function () {
				_$.ajax({
					interface: 'getMsg',
					data: {},
					call: function (data) {
						if (data.status === 200) {
							console.log(JSON.stringify(data));
							_$.template('user_xiaoxi_template', data, function (html) {
								$('#user_xiaoxi').html(html);
								showContents(0);
							})
						} else {
							api.toast({
								msg: '抱歉，未能正常得到消息数据。'
							})
						}
					}
				})
			}, 1000);
			edit = function (status) {
				if(status===true){
					editing = true;
				}
				if (editing) {
					console.log('editing');
					$('.checker').removeClass('checked');
					$('.app_main').removeClass('editing');
					$('.list_delete_line').addClass('hide').find('.checker').removeClass('active');
				} else {
					console.log('notediting');
					$('.app_main').addClass('editing');
					$('.list_delete_line').removeClass('hide');
				}
				editing = !editing;
			}
		};

</script>
<script src="../../lib/js/config.js"></script>
<script src="../../lib/js/jquery.js"></script>
<script src="../../lib/js/common.js"></script>
</body>
</html>